<template>
  <div class="box">
    <div class="dom">1111</div>
    <div>
      <FouDropdown
        v-model="value"
        :elProps="elProps"
        :options="options"
      ></FouDropdown>
    </div>
    <div class=" ml-[30px]">
      <el-color-picker v-model="color" @change="change" />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { elProps, options } from "./index.js";
import FouDropdown from "../../foundation/FouDropdown .vue";
import {OverallColor} from '@/common/data.js'
const color = ref("#133654");
const value = ref("sacasc");
const emit = defineEmits(['change'])
const change = () => {
  OverallColor.value = color.value
  console.log(OverallColor.value);
    emit('change',color.value)
};

const hello = (str) => {
		console.log('子组件的hello方法执行了--' + str)
	}
	
defineExpose({
    hello,color
})
</script>

<style lang="less" scoped>
.box{
    display: flex;
    align-items: center;
    justify-content: center;
}
/* .box :nth-child(2){
    margin-left: 30px;
} */
.dom{
background: v-bind(color);
}
</style>